<template>
  <div class="after-sales-page">
    <Header />
    <div class="container">
      <div class="after-sales-options card">
        <h3 class="card-title">选择售后类型</h3>
        <div class="option-list">
          <div class="option-item" @click="selectOption('return')">
            <span class="option-text">退货退款</span>
            <span class="option-desc">商品不满意，申请退货并退款</span>
            <i class="arrow-right"></i>
          </div>
          <div class="option-item" @click="selectOption('exchange')">
            <span class="option-text">换货</span>
            <span class="option-desc">商品尺码/颜色不合适，申请更换</span>
            <i class="arrow-right"></i>
          </div>
          <!-- <div class="option-item" @click="selectOption('repair')">
            <span class="option-text">维修</span>
            <span class="option-desc">商品出现质量问题，申请维修</span>
            <i class="arrow-right"></i>
          </div> -->
          <div class="option-item" @click="selectOption('refund_only')">
            <span class="option-text">仅退款</span>
            <span class="option-desc">未收到货或与商家协商一致，仅退款</span>
            <i class="arrow-right"></i>
          </div>
        </div>
      </div>

      <div class="contact-info-card card">
        <h3 class="card-title">联系客服</h3>
        <p class="contact-text">如果您有其他售后问题或需要帮助，请随时联系我们的客服团队。</p>
        <div class="contact-buttons">
          <button class="btn primary-btn" @click="contactService">在线客服</button>
          <button class="btn secondary-btn" @click="callService">电话客服</button>
        </div>
      </div>

      <div class="faq-card card">
        <h3 class="card-title">常见问题</h3>
        <ul class="faq-list">
          <li @click="showQuestionModal1 = true"><a>退货退款流程是怎样的？</a></li>
          <li @click="showQuestionModal2 = true"><a>商品出现质量问题如何处理？</a></li>
          <li @click="showQuestionModal3 = true"><a>退款多久能到账？</a></li>
          <li @click="showQuestionModal4 = true"><a>如何查询售后进度？</a></li>
        </ul>
      </div>

      <!-- 常见问题1（抽屉） -->
      <el-drawer v-model="showQuestionModal1" title="常见问题" direction="rtl" size="70%" :before-close="handleClose">
        <div class="card-title">退货退款流程是怎样的？</div>
      </el-drawer>
      <el-drawer v-model="showQuestionModal2" title="常见问题" direction="rtl" size="70%" :before-close="handleClose">
        <div class="card-title">商品出现质量问题如何处理？</div>
      </el-drawer>
      <el-drawer v-model="showQuestionModal3" title="常见问题" direction="rtl" size="70%" :before-close="handleClose">
        <div class="card-title">退款多久能到账？</div>
      </el-drawer>
      <el-drawer v-model="showQuestionModal4" title="常见问题" direction="rtl" size="70%" :before-close="handleClose">
        <div class="card-title">如何查询售后进度？</div>
      </el-drawer>

      <div class="actions">
        <button class="btn primary-btn" @click="goBack">返回</button>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import Header from '@/components/Header.vue'
  import { ElMessage, ElMessageBox } from 'element-plus'

  const route = useRoute()
  const router = useRouter()

  // 传值方式 router.push(`/order-detail/${order.id}`)
  const orderId = route.params.id ? route.params.id : ''

  const selectOption = (type) => {
    // alert(`您选择了：${type === 'return' ? '退货退款' : type === 'exchange' ? '换货' : type === 'repair' ? '维修' : '仅退款'}，功能待实现`)
    // 实际应用中，这里会根据选择的类型跳转到相应的售后申请页面
    // 复制小程序路径（如 pages/contact/index），并生成 URL Scheme（在微信开放平台生成）

    // 判断是否在微信内
    const isWeixin = /MicroMessenger/i.test(navigator.userAgent)
    if (isWeixin) {
      // 引导用户跳转小程序客服
      window.location.href = 'weixin://dl/business/?t=pages/order/detail?orderId=' + orderId
    } else {
      ElMessage.warning('请在微信内打开')
    }
  }

  const contactService = () => {
    // 实际应用中，这里可以跳转到在线客服页面或弹出聊天窗口
    // 复制小程序路径（如 pages/contact/index），并生成 URL Scheme（在微信开放平台生成）

    // 判断是否在微信内
    const isWeixin = /MicroMessenger/i.test(navigator.userAgent)
    if (isWeixin) {
      // 引导用户跳转小程序客服
      window.location.href = 'weixin://dl/business/?t=pages/user/user'
    } else {
      ElMessage.warning('请在微信内打开')
    }
  }

  const callService = () => {
    // 实际应用中，这里可以显示客服电话或直接拨打
    ElMessageBox.alert('400-123-4567', '客服电话', {})
  }

  const goBack = () => {
    router.back()
  }

  const showQuestionModal1 = ref(false)
  const showQuestionModal2 = ref(false)
  const showQuestionModal3 = ref(false)
  const showQuestionModal4 = ref(false)
  const handleClose = (done) => {
    done()
  }
</script>

<style scoped>
  .after-sales-page {
    padding: 20px 0;
    min-height: calc(100vh - 130px); /* 减去Header和Footer的高度 */
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }

  .page-title {
    font-size: 28px;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
    position: relative;
    padding-bottom: 10px;
  }

  .page-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #961d13; /* 品牌色 */
    border-radius: 2px;
  }

  .card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    padding: 25px;
  }

  .card-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }

  /* After Sales Options Card */
  .option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px dashed #eee;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .option-item:last-child {
    border-bottom: none;
  }

  .option-item:hover {
    background-color: #f9f9f9;
  }

  .option-text {
    font-size: 17px;
    color: #333;
    font-weight: 500;
  }

  .option-desc {
    font-size: 14px;
    color: #999;
    flex-grow: 1;
    margin-left: 15px;
  }

  .arrow-right {
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    transform: rotate(45deg);
  }

  /* Contact Info Card */
  .contact-text {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
  }

  .contact-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
  }

  /* FAQ Card */
  .faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .faq-list li {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    cursor: pointer;
  }

  .faq-list li:last-child {
    border-bottom: none;
  }

  .faq-list li a {
    font-size: 15px;
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .faq-list li a:hover {
    color: #961d13; /* 品牌色 */
  }

  /* Actions */
  .actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
  }

  .btn {
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
  }

  .primary-btn {
    background-color: #961d13; /* 品牌色 */
    color: #fff;
  }

  .primary-btn:hover {
    background-color: #7a170f;
    box-shadow: 0 4px 12px rgba(150, 29, 19, 0.3);
  }

  .secondary-btn {
    background-color: #52a58a; /* 辅助色 */
    color: #fff;
  }

  .secondary-btn:hover {
    background-color: #459a7e;
    box-shadow: 0 4px 12px rgba(82, 165, 138, 0.3);
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .container {
      padding: 0 15px;
    }

    .page-title {
      font-size: 24px;
      margin-bottom: 25px;
    }

    .card {
      padding: 20px;
      margin-bottom: 15px;
    }

    .card-title {
      font-size: 18px;
      margin-bottom: 15px;
    }

    .option-item {
      flex-wrap: wrap;
      padding: 12px 0;
    }

    .option-text {
      flex-basis: 100%;
      margin-bottom: 5px;
    }

    .option-desc {
      flex-grow: 1;
      margin-left: 0;
    }

    .arrow-right {
      margin-left: auto;
    }

    .contact-buttons {
      flex-direction: column;
      gap: 10px;
    }

    .btn {
      padding: 10px 25px;
      font-size: 15px;
      width: 100%;
    }

    .actions {
      flex-direction: column;
      gap: 15px;
      margin-top: 25px;
    }
  }

  @media (max-width: 480px) {
    .page-title {
      font-size: 22px;
      margin-bottom: 20px;
    }

    .card {
      padding: 15px;
    }

    .card-title {
      font-size: 16px;
      margin-bottom: 12px;
    }

    .option-text {
      font-size: 16px;
    }

    .option-desc {
      font-size: 13px;
    }

    .contact-text,
    .faq-list li a {
      font-size: 14px;
    }

    .btn {
      max-width: 250px;
    }
  }
</style>
